<template>
	<div class="home">

		<div class="navs">
			<h1>XX酒庄</h1>
			
			<router-link v-if="adminRole!=2" to="/usermanager" style="padding-bottom: 0;padding-bottom: 10px;" class="left warps one">
				<p @click="show" class="aside">
					<img src="../assets/usermar.png" alt="" />
					<span>用户管理</span>
				</p>
				<el-collapse-transition>
					<div v-show="flag" style="">
						<router-link style="padding-left: 25%;width: 70%;padding-right: 5%;font-size: 15px;" to="/usermanager/usermanagerinfo"
							class="left">管理员管理</router-link>
						<router-link style="padding-left: 30%;width: 70%;font-size: 15px;padding-bottom: 10px;" to="/usermanager/usermanagercontrol"
							class="left">用户信息管理</router-link>
					</div>
				</el-collapse-transition>
			</router-link>
			<router-link v-if="adminRole==2" to="/gerenzhong" class="left warp aside">
				<img src="../assets/usermar.png" alt="" />
				<span>个人中心</span>
			</router-link>
			<router-link v-if="adminRole!=2" to="/homepage" class="left warp aside">
				<img src="../assets/mendian.png" alt="" />
				<span>门&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;店</span>
			</router-link>
			<router-link v-if="adminRole!=2" to="/message" class="left warps aside">
				<img src="../assets/fenlei.png" alt="" />
				<span>分类管理</span>
			</router-link>
			<router-link to="/projectmananger" class="left warps aside">
				<img src="../assets/shangpin.png" alt="" />
				<span>商品管理</span>
			</router-link>
			<router-link v-if="adminRole!=2" to="/orders" class="left warps aside">
				<img src="../assets/dingdan.png" alt="" />
				<span>订单管理</span>
			</router-link>
			<!-- 门店订单 -->
			<router-link v-if="adminRole==2" to="/storeordersview" class="left warps aside">
				<img src="../assets/dingdan.png" alt="" />
				<span>订单管理</span>
			</router-link>
			<router-link v-if="adminRole!=2" to="/staticsproject" class="left warps aside">
				<img src="../assets/xiaoshou.png" alt="" />
				<span>销售管理</span>
			</router-link>
			<!-- 门店销售 -->
			<router-link v-if="adminRole==2" to="/saleproject" class="left warps aside">
				<img src="../assets/xiaoshou.png" alt="" />
				<span>销售管理</span>
			</router-link>
			<router-link to="/setup" class="left warps aside">
				<img src="../assets/yijian.png" alt="" />
				<span>意见反馈</span>
			</router-link>
			<router-link to="/business" class="left warps aside">
				<img src="../assets/pinglun.png" alt="" />
				<span>评论管理</span>
			</router-link>
			<!-- v-if="adminRole==2" -->
			
			<!-- @click="tuichu" -->
			<a class="quit"  href="#"  @click="dialogVisible = true">
				<img src="../assets/back.png" style="width: 20px;height: 20px;" alt=""><span style="color: #333;">退出</span>
			</a>

		</div>
		<div class="section">
			<el-header>
				<div class="header_imafgasd">
					<!-- http://localhost:8081/admin/addAdminImage -->
					<el-upload class="avatar-uploader" action="#" :show-file-list="false" :limit="1" :auto-upload="false"
						:on-change="chanimg" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<h4 class="namea">{{ name }}</h4>
				</div>
			</el-header>
			<router-view></router-view>
		</div>
		<el-dialog title="确定要退出吗？" :visible.sync="dialogVisible" width="30%"  center>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="tuichu">确 定</el-button>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
import router from '@/router'

export default {
    data() {
        return {
            dialogVisible: false,
            imageUrl: '',
            basurl: require('../assets/baseUrl').baseUrl,
            name: "",
            adminid: 0,
            fild: "",
            flag: false,
            adminRole: 0, //判断身份，0和1总店，2分店
        };
    },
    methods: {
        show() {
            this.flag = !this.flag;
            var one = document.getElementsByClassName("one")[0];
            // console.log(one)
            if (this.flag == false) {
                one.style.paddingBottom = "10px";
            }
            else {
                one.style.paddingBottom = "0px";
            }
        },
        //换头像
        chanimg(file) {
            // console.log(file.raw)
            this.fild = file.raw;
            //http://localhost:8081/admin/addAdminImage
            this.$http.post(this.basurl + "admin/addAdminImage", {
                file: this.fild
            }, { headers: { 'Content-Type': 'multipart/form-data' } }).then(res => {
                /* console.log(res) */
                if (res.data.code == 200) {
                    this.xuigai();
                    this.imageUrl = this.basurl + res.data.msg;
                    //console.log(this.imageUrl)
                    sessionStorage.setItem("iserIcon", res.data.msg);
                    this.$message.success("更换成功");
					this.$router.push("/homepage/homeproject");
                }
            });
        },
        xuigai(file) {
            /* http://localhost:8081/admin/change */
            this.$http.post(this.basurl + "admin/changeAdmin", {
                file: this.fild,
                adminId: this.adminid,
            }, { headers: { 'Content-Type': 'multipart/form-data' } }).then(res => {
                //console.log(res)
				//console.log(2111121212)
            });
        },
        //退出
        tuichu() {
            this.$http.post(this.basurl + "admin/changeLog", {
                adminId: this.adminid,
                logStatus: 0
            }).then(res => {
                sessionStorage.clear();
                this.dialogVisible = false;
                this.$router.push("/login");
            });
        },
        handleAvatarSuccess(res, file) {
            this.imadsd = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
        // flags(){
        // 	this.flag=!this.flag
        // 	console.log(this.flag)
        // }
    },
    mounted() {
        this.imageUrl = this.basurl + sessionStorage.getItem("iserIcon");
        this.name = sessionStorage.getItem("adminName");
        this.adminid = Number(sessionStorage.getItem("adminId"));
        this.adminRole = sessionStorage.getItem("adminRole");
    },
    components: { router }
}
</script>
<style lang="less">
* {
	margin: 0;
	padding: 0;
}
.home {
	display: flex;

	.navs {
		width: 15vw;
		// height: 100%;
		background: url(../assets/nav.png);
		min-width: 170px;
		position: relative;

		.quit {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 200px;
			img {
				width: 25px;
				height: auto;
				margin-right: 10px;
				line-height: 0px;

			}
		}

	}

	.header_imafgasd {
		.avatar-uploader {
			width: 50px;
			height: 50px;
			line-height: 50px;
			margin: 0 10px;
		}

		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 60px;

		.namea {
			margin: 0 20px;
		}

		.avatar-uploader {
			display: flex;
		}
		.avatar {
		width: 50px;
		height: 50px;
		display: block;
		border-radius: 100%;
	}
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		border-radius: 100%;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}

	
}

.home a {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.home .section {
	width: 85vw;
	/* min-width: ; */
	min-width: 1000px;
}

.home .navs h1 {
	text-align: center;
	margin: 15px 0;
}

.home .navs .aside {
	display: flex;
	justify-content: center;
	align-items: center;
}

.home .navs .aside img {
	width: 20px;
	height: auto;
	margin-right: 10px;
}
</style>
